<!doctype html >
<html  xmlns:th="http://www.thymeleaf.org"
       xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title th:text="${article.articleTitle}"></title>
<meta name="keywords" content="梓树下听昕阳" />
<meta name="description" th:content="${article.articleTabloid}"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/base.css" rel="stylesheet">
<link href="/css/index.css" rel="stylesheet">
<link href="/css/info.css" rel="stylesheet">
<link href="/css/m.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/editormd/editormd.preview.min.css"/>
  <link rel="stylesheet" href="/css/show.css">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/lightgallery/1.6.11/css/lightgallery.min.css" rel="stylesheet">
<script src="/js/jquery.min.js" type="text/javascript"></script>
  <script src="/js/info.js"></script>
<!--[if lt IE 9]>
<![endif]-->
</head>
<body>
<header>
  <div class="logo"><a href="/">梓树下听昕阳</a></div>
  <nav id="nav">
      <ul>
          <li><a href="/">网站首页</a></li>
          <li><a href="/users/share">我的相册</a></li>
          <li><a href="/users/user">个人中心</a></li>
          <li shiro:hasRole="admin"><a href="/users/admin">后台管理</a></li>
          <li><a href="/users/editor">写博客</a></li>
          <li><a href="/logout">退出登录</a></li>
      </ul>
  </nav>
  <script>
window.onload = function ()
{
var obj=null;
var As=document.getElementById('nav').getElementsByTagName('a');
obj = As[0];
for(i=1;i<As.length;i++){if(window.location.href.indexOf(As[i].href)>=0)
obj=As[i];}
obj.id='selected'
}

</script> 
  <script type="text/javascript">

$(document).ready(function(e) {			
	t = $('.tuijian').offset().top;
	mh = $('.infosbox').height();
	fh = $('.tuijian').height();
	gh = $('.guanzhu').height();
	$(window).scroll(function(e){
		s = $(document).scrollTop();	
		if(s > t - 10){
			$('.tuijian').css('position','fixed');
	
			if(s + fh > mh){
				$('.tuijian').css('top',mh-s-fh+'px');	
			}				
		}else{
			$('.tuijian').css('position','');
		}
		if(s > t - 10){
			$('.guanzhu').css('position','fixed');
			if(s + gh > mh){
				$('.guanzhu').css('top',mh-s-gh+'px');	
			}				
		}else{
			$('.guanzhu').css('position','');
		}
	})
});

</script> 
</header>
<article>
  <div class="l_box">
    <div class="search">
      <form action="/e/search/index.php" method="post" name="searchform" id="searchform">
        <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词" style="color: rgb(153, 153, 153);" onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}" onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
        <input name="show" value="title" type="hidden">
        <input name="tempid" value="1" type="hidden">
        <input name="tbname" value="news" type="hidden">
        <input name="Submit" class="input_submit" value="搜索" type="submit">
      </form>
    </div>
    <div class="tuijian">
      <h2>最新文章</h2>
      <ul id="newArticle">
        <li><a href="/">你是什么人便会遇上什么人</a></li>
        <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li>
        <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li>
        <li><a href="/">个人博客模板《绅士》后台管理</a></li>
        <li><a href="/">你是什么人便会遇上什么人</a></li>
        <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li>
        <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li>
        <li><a href="/">个人博客模板《绅士》后台管理</a></li>
      </ul>
    </div>
    <div class="tuijian" style="top: 215px">
      <h2>最热文章</h2>
      <ul id="hotArticle">
        <li><a href="/">你是什么人便会遇上什么人</a></li>
        <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li>
        <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li>
        <li><a href="/">个人博客模板《绅士》后台管理</a></li>
        <li><a href="/">你是什么人便会遇上什么人</a></li>
        <li><a href="/">帝国cms 列表页调用子栏目，没有则不显示栏目名称</a></li>
        <li><a href="/">第二届 优秀个人博客模板比赛参选活动</a></li>
        <li><a href="/">个人博客模板《绅士》后台管理</a></li>
      </ul>
    </div>
    <div class="cloud">
      <h2>标签云</h2>
      <ul id="tagCloud">
        <a href="/">陌上花开</a> <a href="/">校园生活</a> <a href="/">html5</a> <a href="/">SumSung</a> <a href="/">青春</a> <a href="/">温暖</a> <a href="/">阳光</a> <a href="/">三星</a><a href="/">索尼</a> <a href="/">华维荣耀</a> <a href="/">三星</a> <a href="/">索尼</a>
      </ul>
    </div>
  </div>
  <div class="infosbox">
    <div class="newsview">
      <h3 class="news_title" th:text="${article.articleTitle}">个人博客，属于我的小世界！</h3>
      <div class="bloginfo">
        <ul>
          <li class="author">作者：<a href="/" th:text="${article.articleAuthor}">杨青</a></li>
          <li class="lmname"><a th:href="'/findArticle/toTag/'+${article.articleCategories}" th:text="${article.articleCategories}">学无止境</a></li>
          <li class="timer" ><a th:href="'/findArticle/toTag/'+${article.articleDate}" th:text="${article.articleDate}">学无止境</a></li>
          <li class="view" th:text="${article.articleHot}+'人已阅读'">4567人已阅读</li>
        </ul>
      </div>
      <div class="tags"><a href="/" target="_blank" th:each="tag:${tags}" th:href="'/findArticle/toTag/'+${tag}" th:text="${tag}">个人博客</a></div>
      <div class="news_about">
        <div id="wordsView">
          <textarea  name="editormd-markdown-doc" id="mdText" th:text="${article.articleContent}"></textarea>
        </div>
      </div>
    <div class="share">
      <p class="diggit"><a href=""> 很赞哦！ </a></p>
    </div>

  </div>
</article>
<footer>
  <p>Design by <a href="http://www.yangqq.com" target="_blank">梓树下听昕阳</a> <a href="/">豫ICP备19002794号</a></p>
</footer>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdn.bootcss.com/modernizr/2010.07.06dev/modernizr.min.js"></script>
<script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.ie8polyfill.min.js"></script>
<script src="https://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
<script src="/js/editormd/editormd.js" charset="utf-8"></script>
<script src="/lib/marked.min.js"></script>
<script src="https://cdn.bootcss.com/prettify/r298/prettify.min.js"></script>
<script src="https://cdn.bootcss.com/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdn.bootcss.com/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>
<script src="https://cdn.bootcss.com/flowchart/1.11.3/flowchart.min.js"></script>
<script src="/lib/jquery.flowchart.min.js"></script>
<script src="/js/lightgallery/lightgallery.js"></script>
<script src="/js/show.js"></script>
<!--放大图片插件-->
<script src="/js/lightgallery/picturefill.min.js"></script>
<script src="/js/lightgallery/lg-pager.js"></script>
<script src="/js/lightgallery/lg-autoplay.js"></script>
<script src="/js/lightgallery/lg-fullscreen.js"></script>
<script src="/js/lightgallery/lg-zoom.js"></script>
</body>
</html>
